<template>
  <div :class="type == '1' ? 'level_type_1 level' : 'level_type_2 level'">
    <div :class="
        type == '1' ? 'back_type_1 header_center' : 'back_type_2 header_center'
      ">
      <header_ class="header_" :pathName="this.$store.state" background="#00000000" color="#000000" image_="1"
        :Weixin_="Weixin_" v-on:getHeight="getHeight($event)" size="4.8vw">
        <template slot="taber_tab">
          <div class="table_tab">
            <div @click="levepage(1)" :class="type == '1' ? 'active' : ''">
              财富等级
              <div class="line" v-if="type == '1'"></div>
            </div>
            <div @click="levepage(2)" :class="type == '2' ? 'active' : ''">
              魅力等级
              <div class="line" v-if="type == '2'"></div>
            </div>
          </div>
        </template>
      </header_>
      <div class="center_list">
        <div class="wealth">
          <div class="userIfon">
            <div class="head_pic">
              <img v-if="list.headPic" :src="list.headPic" alt="" />
              <div class="dengji_and_name">
                <span v-if="type == '1'">我的财富等级</span>
                <span v-if="type == '2'">我的魅力等级</span>
                <div>{{ list.levelName }}</div>
              </div>
            </div>
          </div>
          <div class="progressBar progress">
            <div class="progress-bar progress-bar-info active2" :style="'width:' + list.nextLevelPercent + '%'"></div>
          </div>
          <div class="disparity">
            <span>差 {{ list.nextLevelAmount }} 点{{type == '1'?'财富':'魅力'}}值升级至 </span>
            <span> {{ list.nextLevelName }}</span>
          </div>
          <div class="Strategy" id="header">
            <img v-if="type == '1'" src="../../public/img2/level_new/wealth_upgrade_btn@2x.png" @click="returnTop" />
            <img v-if="type == '2'" src="../../public/img2/level_new/charm_upgrade_btn@2x.png" @click="returnTop" />
          </div>
        </div>
        <div class="icon_dengji">
          <img v-if="type == '1'" :src="list.levelPic" alt="" style="width:38vw;position:absolute;top:0vw" />
          <img v-if="type == '2'" :src="list.levelPic" alt="" style="width:38vw;position:absolute;top:0vw" />
        </div>
      </div>
    </div>
    <div class="Wealthlevel_dengji">
      <div class="center_neirong">
        <div class="left_icon">
          <img v-if="type == '1'" src="../../public/img2/level_new/wealth_what_icon@2x.png" alt="" />
          <img v-if="type == '1'" src="../../public/img2/level_new/wealth_how_icon@2x.png" alt="" />

          <img v-if="type == '2'" src="../../public/img2/level_new/charm_what_icon@2x.png" alt="" />
          <img v-if="type == '2'" src="../../public/img2/level_new/charm_how_icon@2x.png" alt="" />
        </div>
        <div class="right_center">
          <div class="title_top">
            <span v-if="type == '1'">什么是财富等级?</span>
            <span class="title_top_2" v-if="type == '2'">什么是魅力等级?</span>
          </div>
          <div class="text_icon">
            <span v-if="type == '1'">财富等级是用户在声贝交友中财力的象征,等级越高,财富称号越厉害!只有在房间中送出礼物,就能提升财富等级</span>
            <img v-if="type == '1'" src="../../public/img2/level_new/wealth_heart_img@2x(1).png" alt="" />
            <span v-if="type == '1'">背包礼物和钻石礼物都可以升级嗷</span>

            <span v-if="type == '2'">魅力等级是用户在声贝交友中魅力的象征,等级越高,魅力称号越厉害!只有在房间中收到礼物,就能提升魅力等级</span>
            <img class="text_icon_img2" v-if="type == '2'" src="../../public/img2/level_new/wealth_heart_img@2x(1).png"
              alt="" />
            <span id="text_icon_2" v-if="type == '2'">背包礼物和钻石礼物都可以升级嗷</span>
          </div>
          <div class="secondary_title">
            <span v-if="type == '1'">财富等级如何升级?</span>
            <span class="secondary_title_typr_2" v-if="type == '2'">魅力等级如何升级?</span>
          </div>
          <div class="secondary_center">
            <span v-if="type == '1'">每在房间中送出钻石礼物,即可提升财富等级</span>
            <span v-if="type == '2'">每在房间中收到钻石礼物,即可提升魅力等级</span>
          </div>
          <div :class="type == '1' ? 'upgrade_up' : 'upgrade_up upgrade_up2'">
            <img src="../../public/img2/level_new/wealth_heart_img@2x(1).png" alt="" />
            <span>100钻石=1元人民币</span>
          </div>
        </div>
      </div>
    </div>

    <div class="GradeTable">
      <ul class="level_rich">
        <li class="title">
          <div>等级图标</div>
          <div>财富称号</div>
          <div>财富总值</div>
        </li>
        <li class="center_body" v-for="(item, index) in list.levelList" :key="index">
          <div>
            <img :src="item.longIcon" />
            <!-- <img src="../../public/img2/level_new/charm_long41@2x.png" /> -->
          </div>
          <div>{{ item.levelName }}</div>
          <div>{{ item.amount }}</div>
        </li>
      </ul>
    </div>

    <div class="Exhibition" v-if="type == '1'">
      <div class="list_bition">
        <div class="title_top_mistion">财富等级如何展示?</div>
        <div class="two_mistion">除了在个人详情页和房间内的卡片上有展示等级以外,还会在以下情况中展示给大家看哦~</div>
        <div class="span_center_istion">
          <span>1.财富值从卓越君王起,升级会在房间内出现升级横幅(具体升级规律在下方展示),房间所有人都能看到,快点升级来接受大家的祝贺吧! </span>
          <span>等级升级横幅出现规律:</span>
          <span>卓越君王以上每升一级都有全服等级通知</span>
          <!-- <span>卓越君王-1级,4级,7级,10级;</span> -->
          <!-- <span>永恒帝皇-1级,3级,5级,7级,9级,10级;</span>
          <span>至尊幻神-每级提示</span> -->
        </div>
        <img src="../../public/img2/level_new/hengfu_img.png" />
        <div class="two_mistion2">2.财富值的标识还会在房间聊天公屏上直接显示出来,房间所有人都能看到你的尊贵啦~</div>
        <img src="../../public/img2/level_new/biaoshi_img.png" />
        <div class="two_mistion2">3.财富值达到100w财富值时,进房间有进场特效展示</div>
        <img src="../../public/img2/level_new/jinchang_img.png" />
      </div>
    </div>

    <div class="EntryEffect" v-if="type == '1'">
      <div class="title_top_cont">
        财富值达到不同值时,进房间不同进场特效展示
      </div>
      <div class="center_body2" v-for="(item, index) in list.levelEntryList" :key="index">
        <div class="icon_dengji2">
          <img :src="item.longIcon" />
          <!-- <img src="../../public/img2/level_new/charm_long41@2x.png" /> -->
        </div>
        <div class="icon_texiao2">
          <div class="room_go">
            <!-- <img :src="item.longIcon" alt="" />
            <span>{{ splice_(list.nickName) }}</span>
            <span>进入了房间</span> -->
          </div>
          <img :src="item.goodsImage" />
          <!-- <img src="../../public/img2/level_new/jinchang_img@2x(1).png" /> -->
        </div>

        <!-- <div class="effects_icon"><img :src="item.longIcon" /></div>
        <div class="Grade_icon"><img :src="item.goodsImage" /></div> -->
        <div class="post_name">{{ item.goodsName }}</div>
      </div>
    </div>
  </div>
</template>

<script>
  import {
    Toast
  } from "vant";
  import header_ from "../../components/header_";

  export default {
    data() {
      return {
        Weixin_: false,
        type: 1,
        list: {
          headPic: "",
          levelPic: "",
          Height: 48,
        }, //会员信息
      };
    },
    components: {
      header_,
    },
    created() {
      this.levepage(this.type);
    },
    mounted() {
      var u = navigator.userAgent;
      var isiOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/); //ios终端
      var ua = navigator.userAgent.toLowerCase(); //微信小程序 
      if (ua.match(/MicroMessenger/i) == "micromessenger") {
        this.Weixin_ = false
      } else {
        this.Weixin_ = false
        if (isiOS) {
          if (window.webkit) {
            window.webkit.messageHandlers.setStatusBarTheme.postMessage({
              setStatusBarTheme: 1
            });
          }
        } else {
          app.setStatusBarTheme(1)
        }
      }
    },
    methods: {
      getHeight(height) {
        this.Height = height;
      },
      splice_(value) {
        let slice2 = "";
        if (value.length > 4) {
          slice2 = value
          slice2 = slice2.slice(0, 3)
          return slice2 + '...';
        }
      },
      returnTop() {
        var anchor = this.$el.querySelector("#header");
        anchor.scrollIntoView({
          behavior: "smooth", // 平滑过渡
          block: "start", // 上边框与视窗顶部平齐
        });
      },
      levepage(type) {
        this.type = type;
        let arys = {
          type: type,
        }; //参数
        let url = "/user/levelPageV2";
        this.$.encryption2(arys, url).then((res) => {
          if (res.data.status == 0) {
            this.list = res.data.result;
          } else {
            Toast(res.data.text);
          }
        });
      },
    },
  };
</script>
<style scoped lang="less">
  @auto: 0 auto;

  .pxToVW (@px, @attr: width) {
    @vw: (unit(round((@px / 4.14) * 100)) / 100);
    @{attr}:~"@{vw}vw";
  }

  .header_ {
    position: relative !important;
    width: 100vw;
    height: 48px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 4.4vw;
    font-family: PingFangSC-Medium, PingFang SC;
    background: #fff;
  }

  .level {
    width: 100vw;
    overflow: hidden;
  }

  .level_type_1 {
    background: linear-gradient(90deg, #1b0836 0%, #4e056a 100%);
  }

  .level_type_2 {
    background: linear-gradient(90deg, #331f08 0%, #360a39 100%);
  }

  .back_type_1 {
    background: url("../../public/img2/level_new/wealth_bg@2x.png") no-repeat;
  }

  .back_type_2 {
    background: url("../../public/img2/level_new/charm_bg@2x.png") no-repeat;
  }

  .header_center {
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    .pxToVW(414);
    .pxToVW(296, height);

    background-size: cover;
    position: relative;

    .center_list {
      width: 100%;
      display: flex;
      justify-content: space-between;
      // position: absolute;
      // bottom: 0;
      color: #ffffff;
      // .pxToVW(24, margin-top);

      .wealth {
        .pxToVW(262);
        display: flex;
        flex-direction: column;

        .userIfon {
          display: flex;
          flex-direction: column;
          .pxToVW(18, margin-left);

          .head_pic {
            display: flex;

            >img {
              .pxToVW(60);
              .pxToVW(60, height);
              border-radius: 50%;
              .pxToVW(15, margin-right);
            }

            .dengji_and_name {
              .pxToVW(60, height);
              display: flex;
              flex: 1;
              flex-direction: column;
              justify-content: space-around;

              span {
                .pxToVW(14, font-size);
                font-family: PingFangSC-Regular, PingFang SC;
                font-weight: 400;
                color: rgba(255, 255, 255, 0.7);
              }
            }
          }
        }

        .progressBar {
          .pxToVW(222);
          .pxToVW(10, height);
          .pxToVW(7, border-radius);
          .pxToVW(20, margin-top);
          .pxToVW(18, margin-left);
          background: rgba(255, 255, 255, 0.49);
          position: relative;
          overflow: hidden;

          .progress {
            overflow: visible;
          }

          .progress-bar {
            float: left;
            width: 0;
            height: 100%;
            font-size: 12px;
            line-height: 20px;
            color: #fff;
            text-align: center;
            background-color: #337ab7;
            -webkit-box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.15);
            box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.15);
            -webkit-transition: width 0.6s ease;
            -o-transition: width 0.6s ease;
            transition: width 0.6s ease;
          }

          .progress .progress-bar {
            border-radius: 20px;
            position: relative;
            animation: animate-positive 2s;
          }

          .progress-bar-info {
            background-color: #ffffff;
            border-radius: 0 20px 20px 0;
          }

          @-webkit-keyframes animate-positive {
            0% {
              width: 0;
            }
          }

          @keyframes animate-positive {
            0% {
              width: 0;
            }
          }
        }

        .disparity {
          .pxToVW(18, margin-left);
          .pxToVW(13, font-size);
          .pxToVW(11, margin-top);
          .pxToVW(10, margin-bottom);
          font-family: PingFangSC-Regular, PingFang SC;
          font-weight: 400;
          color: rgba(255, 255, 255, 0.7);

          >span:nth-of-type(2) {
            .pxToVW(14, font-size);
          }
        }
      }

      .icon_dengji {
        display: flex;
        width: 41vw;
        height: 41vw;
        justify-content: center;
        align-items: center;
        position: relative;

        // >img {
        //   width: 38vw;
        //   position: absolute;
        //   top: 0vw;
        //   right: 1vw;
        //   height: 30vw;
        // }
      }

      .Strategy {
        .pxToVW(97);
        .pxToVW(34, height);
        .pxToVW(18, margin-left);
        .pxToVW(13, margin-bottom);

        img {
          width: 100%;
          height: 100%;
        }
      }
    }
  }

  .Wealthlevel_dengji {
    .pxToVW(382);
    .pxToVW(216, height);
    .pxToVW(17, border-radius);
    background: rgba(255, 255, 255, 0.16);
    margin: @auto;

    .center_neirong {
      width: 92%;
      height: 100%;
      margin: @auto;
      display: flex;
      justify-content: space-between;

      .left_icon {
        .pxToVW(34);
        height: 100%;
        display: flex;
        flex-direction: column;
        align-items: center;

        img:nth-of-type(1) {
          width: 100%;
          .pxToVW(52, margin-top);
        }

        img:nth-of-type(2) {
          width: 100%;
          .pxToVW(55, margin-top);
        }
      }

      .right_center {
        display: flex;
        .pxToVW(300);
        height: 100%;
        flex-direction: column;
        justify-content: center;

        .title_top {
          .pxToVW(14, font-size);
          font-family: PingFangSC-Medium, PingFang SC;
          font-weight: 500;
          color: #ee64f1;

          .title_top_2 {
            color: #fec382;
          }
        }

        .text_icon {
          .pxToVW(13, font-size);
          .pxToVW(9, margin-top);
          .pxToVW(20, margin-bottom);
          font-family: PingFangSC-Regular, PingFang SC;
          font-weight: 400;
          color: #ffffff;
          overflow: hidden;

          img {
            .pxToVW(19);
          }

          .text_icon_img2 {
            filter: drop-shadow(0 -40px #fec382);
            position: relative;
            top: 40px;
          }

          span:nth-of-type(2) {
            .pxToVW(11, font-size);
            font-family: PingFangSC-Regular, PingFang SC;
            font-weight: 400;
            color: rgba(238, 100, 241, 0.74);
          }

          #text_icon_2 {
            color: rgba(254, 195, 130, 0.74);
          }
        }

        .secondary_title {
          .pxToVW(14, font-size);
          font-family: PingFangSC-Medium, PingFang SC;
          font-weight: 500;
          color: #ee64f1;

          .secondary_title_typr_2 {
            color: #fec382;
          }
        }

        .secondary_center {
          .pxToVW(9, margin-top);
          // .pxToVW(9, margin-bottom);
          .pxToVW(13, font-size);
          font-family: PingFangSC-Regular, PingFang SC;
          font-weight: 400;
          color: #ffffff;
        }

        .upgrade_up {
          overflow: hidden;

          img {
            .pxToVW(19);
          }

          span {
            .pxToVW(11, font-size);
            font-family: PingFangSC-Regular, PingFang SC;
            font-weight: 400;
            color: rgba(238, 100, 241, 0.74);
          }
        }

        .upgrade_up2 {
          img {
            filter: drop-shadow(0 -40px #fec382);
            position: relative;
            top: 40px;
          }

          span {
            color: rgba(254, 195, 130, 0.74);
          }
        }
      }
    }
  }

  .GradeTable {
    .pxToVW(382);
    // .pxToVW(466, height);
    .pxToVW(17, border-radius);
    background: rgba(255, 255, 255, 0.16);
    margin: @auto;
    .pxToVW(20, margin-top);
    .pxToVW(20, margin-bottom);

    .level_rich {
      .pxToVW(362);
      // .pxToVW(436, height);
      margin: @auto;
      overflow: hidden;

      .title {
        display: flex;
        border-top: 1px solid rgba(255, 255, 255, 0.2);
        border-left: 1px solid rgba(255, 255, 255, 0.2);
        .pxToVW(13, margin-top);

        >div {
          .pxToVW(120);
          .pxToVW(44, height);
          display: flex;
          justify-content: center;
          align-items: center;
          .pxToVW(15, font-size);
          font-family: PingFangSC-Medium, PingFang SC;
          font-weight: 500;
          color: #ffffff;
          border-right: 1px solid rgba(255, 255, 255, 0.2);
        }
      }

      .center_body:last-child {
        border-bottom: 1px solid rgba(255, 255, 255, 0.2);
        .pxToVW(17, margin-bottom);
      }

      .center_body {
        display: flex;
        border-top: 1px solid rgba(255, 255, 255, 0.2);
        border-left: 1px solid rgba(255, 255, 255, 0.2);

        >div {
          .pxToVW(120);
          .pxToVW(44, height);
          display: flex;
          justify-content: center;
          align-items: center;
          border-right: 1px solid rgba(255, 255, 255, 0.2);

          >img {
            width: 80%;
          }
        }

        >div:nth-of-type(2) {
          .pxToVW(13, font-size);
          font-family: Helvetica;
          color: #ffffff;
        }

        >div:nth-of-type(3) {
          .pxToVW(15, font-size);
          font-family: PingFangSC-Regular, PingFang SC;
          font-weight: 400;
          color: #ffffff;
        }
      }
    }
  }

  .Exhibition {
    .pxToVW(382);
    // .pxToVW(892, height);
    .pxToVW(17, border-radius);
    background: rgba(255, 255, 255, 0.16);
    margin: @auto;
    .pxToVW(20, margin-bottom);
    overflow: hidden;
    .pxToVW(18, padding-bottom);

    .list_bition {
      width: 92%;
      height: 100%;
      margin: @auto;

      >img {
        .pxToVW(20, margin-top);
        width: 100%;
      }

      .title_top_mistion {
        .pxToVW(16, font-size);
        font-family: PingFangSC-Medium, PingFang SC;
        font-weight: bold;
        color: #EE64F1;
        .pxToVW(10, margin-top);
      }

      .two_mistion {
        .pxToVW(12, margin-top);
        .pxToVW(13, font-size);
        font-family: PingFangSC-Regular, PingFang SC;
        font-weight: 400;
        color: #FFFFFF;
      }

      .two_mistion2 {
        .pxToVW(13, font-size);
        font-family: PingFangSC-Regular, PingFang SC;
        font-weight: 400;
        color: #FFFFFF;
        .pxToVW(20, margin-top);

      }

      .span_center_istion {
        .pxToVW(10, margin-top);
        display: flex;
        flex-direction: column;
        .pxToVW(13, font-size);
        font-family: PingFangSC-Regular, PingFang SC;
        font-weight: 400;
        color: #FFFFFF;
      }
    }
  }

  .EntryEffect {
    .pxToVW(382);
    border-radius: 18px 18px 0 0;
    // .pxToVW(466, height);
    background: rgba(255, 255, 255, 0.16);
    margin: @auto;
    display: flex;
    flex-direction: column;

    .title_top_cont {
      width: 100%;
      .pxToVW(51, height);
      flex-shrink: 0;
      display: flex;
      justify-content: center;
      align-items: center;

      .pxToVW(14, font-size);
      font-family: PingFangSC-Medium, PingFang SC;
      font-weight: 500;
      color: #ffffff;
    }

    .center_body2:nth-child(odd) {
      background: rgba(255, 255, 255, 0.22);
    }

    .center_body2:last-child {
      margin-bottom: 40px;
    }

    .center_body2:nth-child(odd) {
      background: rgba(255, 255, 255, 0.22);
    }

    .center_body2 {
      .pxToVW(362);
      .pxToVW(92, height);
      background: rgba(255, 255, 255, 0.12);
      display: flex;
      justify-content: space-around;
      align-items: center;
      position: relative;
      margin: @auto;

      .icon_dengji2 {
        .pxToVW(100);
        display: flex;
        align-items: center;

        img {
          .pxToVW(30, height);
        }
      }

      .icon_texiao2 {
        .pxToVW(217);
        height: 100%;
        display: flex;
        align-items: center;
        z-index: 10;

        .room_go {
          display: flex;
          align-items: center;
          z-index: 999;
          .pxToVW(217);
          .pxToVW(48, height);
          display: flex;
          align-items: center;

          >img {
            .pxToVW(24);
            .pxToVW(6, margin-top);
            .pxToVW(30, margin-left);
            .pxToVW(6, margin-right);
          }

          span:nth-of-type(1) {
            .pxToVW(8, font-size);
            font-family: PingFangSC-Medium, PingFang SC;
            font-weight: 500;
            color: #ffe301;
            .pxToVW(5, padding-right);
            .pxToVW(8, padding-top);
          }

          span:nth-of-type(2) {
            .pxToVW(8, font-size);
            font-family: PingFangSC-Medium, PingFang SC;
            font-weight: 500;
            color: #fff;
            .pxToVW(8, padding-top);
          }
        }

        >img {
          position: absolute;
          .pxToVW(217);
          .pxToVW(48, height);
        }
      }

      .post_name {
        position: absolute;
        top: 0;
        right: 0;
        .pxToVW(12, font-size);
        font-family: PingFangSC-Regular, PingFang SC;
        font-weight: 400;
        color: #ffffff;
        background: rgba(255, 255, 255, 0.12);
        padding: 4px 8px;
        border-radius: 0 0 0 10px;
        z-index: 20;
      }
    }
  }

  .table_tab {
    display: flex;
    justify-content: center;
    align-items: center;

    >div {
      .pxToVW(16, font-size);
      .pxToVW(22, line-height);
      padding: 0 18px;
      font-family: PingFangSC-Regular, PingFang SC;
      font-weight: 400;
      color: #ffffff;
      position: relative;
      display: flex;
      justify-content: center;

      >.line {
        .pxToVW(25);
        .pxToVW(3, height);
        .pxToVW(4, border-radius);
        .pxToVW(-12, bottom);
        background: #ffffff;
        position: absolute;
      }
    }

    .active2 {
      .pxToVW(18, font-size);
      font-family: PingFangSC-Medium, PingFang SC;
      font-weight: 600;
      color: #ffffff;
    }
  }
</style>